<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>adminLTE-MVC</title>
		<!-- Tell the browser to be responsive to screen width -->
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<!-- Bootstrap 3.3.6 -->
		<link rel="stylesheet" href="../adminLTE/bootstrap/css/bootstrap.min.css">
		<!-- Font Awesome -->
		<link rel="stylesheet" href="../adminLTE/dist/css/font-awesome.min.css">
		<!-- Ionicons -->
		<link rel="stylesheet" href="../adminLTE/dist/css/ionicons.min.css">
		<!-- Theme style -->
		<link rel="stylesheet" href="../adminLTE/dist/css/AdminLTE.min.css">
		<!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
		<link rel="stylesheet" href="../adminLTE/dist/css/skins/_all-skins.min.css">
		<link rel="stylesheet" href="../adminLTE/plugins/bootStrap-addTabs/bootstrap.addtabs.css">

		<style>
			.bg-white {
				background-color: white;
			}
		</style>
	</head>
	<!-- ADD THE CLASS fixed TO GET A FIXED HEADER AND SIDEBAR LAYOUT -->
	<!-- the fixed layout is not compatible with sidebar-mini -->

	<body class="hold-transition skin-blue fixed sidebar-mini">
		<!-- Site wrapper -->
		<div class="wrapper" id="wrapper">

			<header class="main-header">
				<!-- Logo -->
				<a href="../adminLTE/index2.html" class="logo">
					<!-- mini logo for sidebar mini 50x50 pixels -->
					<span class="logo-mini">{{ moduleSimpleName }}</span>
					<!-- logo for regular state and mobile devices -->
					<span class="logo-lg">{{ moduleFullName }}</span>
				</a>
				<!-- Header Navbar: style can be found in header.less -->
				<nav class="navbar navbar-static-top">
					<!-- Sidebar toggle button-->
					<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">

					</a>

					<div class="navbar-custom-menu">
						<ul class="nav navbar-nav">
							<!-- Messages: style can be found in dropdown.less-->
							<li class="dropdown user user-menu">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									<img v-bind:src="userInfo.userImagePath" class="user-image" alt="User Image">
									<span class="hidden-xs">{{ userInfo.userNickName }}</span>
								</a>
								<ul class="dropdown-menu">
									<!-- User image -->
									<li class="user-header">
										<img v-bind:src="userInfo.userImagePath" class="img-circle" alt="User Image">

										<p>
											{{ userInfo.userNickName }}
											<small>{{ userInfo.userDepartment }}</small>
										</p>
									</li>
									<!-- Menu Footer-->
									<li class="user-footer">
										<div class="col-md-4 text-center">
											<a href="#" class="btn btn-default btn-flat">锁定</a>
										</div>
										<div class="col-md-4 text-center">
											<a href="#" class="btn btn-default btn-flat">注销</a>
										</div>
										<div class="col-md-4 text-center">
											<a target="_blank" href="../adminLTE/pages/widgets.html" class="btn btn-default btn-flat">帮助</a>
										</div>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</nav>
			</header>

			<!-- Left side column. contains the sidebar -->
			<aside class="main-sidebar">
				<!-- sidebar: style can be found in sidebar.less -->
				<section class="sidebar">
					<!-- Sidebar user panel -->
					<div class="user-panel">
						<div class="pull-left image">
							<img v-bind:src="userInfo.userImagePath" class="img-circle" v-bind:alt="userInfo.userNickName">
						</div>
						<div class="pull-left info">
							<p>{{ userInfo.userNickName }}</p>
							<a href="#"><i class="fa fa-circle text-success"></i> {{ userInfo.userDepartment }}</a>
						</div>
					</div>
					<!-- search form -->
					<form action="#" method="get" class="sidebar-form">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="搜索" v-model="search_menuName" v-on:change="searchMenu">
							<span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
						</div>
					</form>
					<!-- /.search form -->
					<!-- sidebar menu: : style can be found in sidebar.less -->
					<ul class="sidebar-menu">
						<li class="header">菜单导航</li>

						<li class="treeview" v-for="todo in menuList.data">
							<a v-bind:href="todo.href">
								<i :class="[todo.cls]"></i><span>{{ todo.name }}</span>
								<span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
							</a>
							<ul class="treeview-menu">
								<li v-for="todo2 in todo.children">
									<a href="#" v-bind:data-addtab="todo2.name" v-bind:data-url="todo2.href" class="handler"><i :class="[todo2.cls]"></i> {{ todo2.name }}</a>
								</li>
							</ul>
						</li>
					</ul>
				</section>
				<!-- /.sidebar -->
			</aside>

			<!-- Content Wrapper. Contains page content -->
			<div class="content-wrapper bg-white">
					<div id="tabs" class="col-md-12 no-padding" >
						<!-- Nav tabs -->
						<ul class="nav nav-tabs " role="tablist">
							<li role="presentation" class="active">
								<a href="#home" aria-controls="home" role="tab" data-toggle="tab">主页</a>
							</li>
						</ul>

						<!-- Tab panes -->
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="home">
								<section class="content">
									<div class="callout callout-info">
										<h4>提示!</h4>

										<p>重新包装adminLTE,使用tab + iframe 模式，我觉得这样会使单页面调试更方便</p>
									</div>
									<div class="callout callout-success">
										<h4>名句</h4>

										<p>山重水复疑无路，柳暗花明又一村</p>
									</div>
									<div class="callout callout-success">
										<h4>名句</h4>

										<p>问渠哪得清如许，唯在源头活水来</p>
									</div>
								</section>
							</div>
						</div>
				</div>
			</div>
		</div>
		<!-- ./wrapper -->

		<!-- jQuery 2.2.3 -->
		<script src="../adminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
		<!-- Bootstrap 3.3.6 -->
		<script src="../adminLTE/bootstrap/js/bootstrap.min.js"></script>
		<!-- SlimScroll -->
		<script src="../adminLTE/plugins/slimScroll/jquery.slimscroll.min.js"></script>
		<!-- FastClick -->
		<script src="../adminLTE/plugins/fastclick/fastclick.js"></script>
		<!-- AdminLTE App -->
		<script src="../adminLTE/dist/js/app.min.js"></script>
		<!-- AdminLTE for demo purposes -->
		<script src="../adminLTE/dist/js/demo.js"></script>
		<script src="../adminLTE/plugins/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
		<script src="../adminLTE/plugins/vue/vue.js"></script>
		<script src="../adminLTE/plugins/vue/vue-resource.min.js"></script>
		<script src="../js/admin.js"></script>
	</body>

</html>